<script setup lang="ts">
import { ref, onMounted } from "vue";
const list = ref([{'/abc':'首页'},{'/category':'分类'},{'/cart':'购物车'},{'/my':'我的'}])
const props = defineProps({
  list: {
    type: Array,
    required: true
  },
  active:{
    type: String,
    required: true
  }
})
</script>
<template>
    <div class="breadcrumb">
      <ul>
        <li v-for="(item,index) in props.list" :key="index">
          <router-link :to="Object.keys(item)[0]" exact-active-class="active">{{Object.values(item)[0]}}</router-link>
        </li>
        <li>{{active}}</li>
      </ul>
    </div>
</template>
<style scoped lang="less">
.breadcrumb{
  ul{
    display: flex;
  }
  li+li:before{
    padding: 8px;
    color: black;
    content: "/\00a0";
  }
  a{
    color:black;
  }
  a:hover,a:active{
    color: #27C0C5;
    text-decoration:underline;
  }
  a.active{
    color:#27BB9A
  }
}
</style>